<script setup lang="ts">
import StackArea from '@/components/echarts/StackArea.vue'
import Bar from '@/components/echarts/Bar.vue'
import Pie from '@/components/echarts/Pie.vue'
import { getPieApi } from '@/api/modules/charts'
import InfiniteList from 'vue3-infinite-list'

const data = (await getPieApi()).result
</script>

<template>
  <div class="echarts-list">
    <InfiniteList
      :data="data.legendData"
      :width="'100%'"
      height="810px"
      :itemSize="500"
    >
      <Pie class="pie" :data="data"></Pie>
    </InfiniteList>
  </div>
</template>

<style lang="scss" scoped>
.echarts-list {
  .first {
    display: flex;
    flex-wrap: wrap;
    .pie {
      flex: 1;
    }
  }
  .second {
    display: flex;
    flex-wrap: wrap;
    .pie {
      flex: 1;
    }
  }
  .third {
    display: flex;
    flex-wrap: wrap;
    .pie {
      flex: 1;
    }
  }
}
</style>
